<template>
    <div>
        <van-nav-bar title="筛选组件" >
            <van-icon size='.4rem' name="cross" slot='left'
                @click='closeFilterWrap'/>
        </van-nav-bar>

        <div class='gridTitle'>学历要求</div>
        <van-grid :column-num="3" :gutter="10">
            <van-grid-item  class='newone' @click='itemBtnClick($event)' text="全部" />
            <van-grid-item @click='itemBtnClick($event)' text="大专" />
            <van-grid-item @click='itemBtnClick($event)' text="本科" />
            <van-grid-item @click='itemBtnClick($event)' text="研究生" />
            <van-grid-item @click='itemBtnClick($event)' text="博士" />
        </van-grid>

        <div class='gridTitle'>薪资待遇</div>
        <van-grid :column-num="3" :gutter="10">
            <van-grid-item @click='itemBtnClick($event)' text="全部" />
            <van-grid-item @click='itemBtnClick($event)' text='8K' />
            <van-grid-item @click='itemBtnClick($event)' text="10K" />
            <van-grid-item @click='itemBtnClick($event)' text="15K" />
            <van-grid-item @click='itemBtnClick($event)' text="20K" />
        </van-grid>

        <div class='filter_footer'>
            <van-button plain type="default">清除</van-button>
            <van-button plain type="info" @click='confirmBtn'>确定</van-button>
        </div>
    </div>
</template>

<script>

//要在这里引入，而不是main文件中引入
import '../assets/reset_vant.css'

export default {
    name: 'filter_wrap',
    data(){
        return{
            msg:'筛选组件',
            filter_result:[]
        }
    },
    methods:{
        closeFilterWrap(){
            this.$emit('closeFilterFn');
        },
        itemBtnClick(_d){
            // console.log(_d.target.innerText);
            let _txt=_d.target.innerText;
            let _cls=_d.target.getAttribute('class');
            // console.log(typeof _cls)
            //将字符串按空格转化为数组
            // console.log(_cls.split(' '))
            let _clsArr= _cls.split(' ');
            
            //判断当前按钮有没有‘选中的css样式’默认没有
            let _is= false;

            //判断当前按钮有没有选中的css
            for (var i=0;i<_clsArr.length;i++){

                    if(_clsArr[i]=='van_grid_item_focus'){
                        _clsArr.splice(i,1);
                        _is= true;
                        break;
                    }
                _is =false;
            }
            //当前按钮中没有选中的css样式 则
            if(_is){
                //有 就把删选数据删除
                    for( let i=0;i<this.filter_result.length;i++){
                        if(this.filter_result[i]==_txt){
                            this.filter_result.splice(i,1);
                        }
                    }
                }else{
                    //没有就添加样式
                _clsArr.push('van_grid_item_focus');
                this.filter_result.push(_txt)
            }
            //再把_clsArr转为string写入样式中去
            let _cls_txt= _clsArr.join(' ')
            _d.target.setAttribute('class',_cls_txt)

        },
        //确定按钮
        confirmBtn(){
            console.log(this.filter_result)
        }
        
    }
  
}
</script>

<style scoped>

.gridTitle{
	padding: .2rem .2rem;clear: both;font-size: .3rem;font-weight: bold;
}
.gridTitle label{font-weight: normal;font-size: .2rem;padding: 0 10px;}
.filter_footer{
	text-align: center;margin-top: 1rem;
	width: 100%;
}


</style>